<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../../node_modules/bootstrap-icons/font/bootstrap-icons.css">
    <link rel="stylesheet" href="./http.css">
</head>
<body style="height:100%">
    <div id="app" class="container-fluid h-100">
        <!-- <form role="form" style="height: 100%;"> -->
        <div class="row pt-4">
            <div class="col input-group">
                <button type="button" class="btn btn-primary btn-sm dropdown-toggle" style="width:120px" data-bs-toggle="dropdown">{{chooseMethod.title}}</button>
                <ul class="dropdown-menu">
                    <li v-for="(item, index) in httpMethods" @click="myChoose(item.name)"><a href="#" class="dropdown-item">{{item.title}}</a></li>
                </ul>
                <!-- <select class="form-control">
                    <option v-for="(item, index) in httpMethods">{{item.title}}</option>
                </select> -->
                <input type="text" class="form-control form-control-sm" v-model="myUrl" placeholder="Enter Request URL">
                <button type="button" class="btn btn-primary btn-sm" @click="sendRequest" style="width:100px;">Send</button>
            </div>
            <!-- <div class="col-1">
                <button type="button" class="btn btn-primary btn-sm" @click="sendRequest">Send</button>
            </div> -->
        </div>
        <div class="row mt-2">
            <div class="col">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item"><a href="#header" class="nav-link" role="tab" data-bs-toggle="tab">请求头</a></li>
                    <li class="nav-item"><a href="#params" class="nav-link active" role="tab" data-bs-toggle="tab">参数设置</a></li>
                    <li class="nav-item"><a href="#body" class="nav-link" role="tab" data-bs-toggle="tab">Body</a></li>
                </ul>
            </div>
        </div>
        <div class="row mt-2" style="height: 320px;">
            <div class="col">
                <div class="tab-content" style="width: 100%;">
                    <!-- header -->
                    <div id="header" class="container-fluid tab-pane fade" style="width: 100%; margin-left: 0; margin-right: 0;">
                        <div class="row">
                            <div class="col">
                                <table class="table table-hover table-sm">
                                    <thead>
                                        <td style="width: 50px;">&nbsp;</td>
                                        <td>Key</td>
                                        <td>Value</td>
                                        <td>Description</td>
                                        <td style="width: 50px;"><i class="bi bi-plus-circle" style="font-size:1.5rem; cursor: pointer;" @click="addItem('header')"></i></td>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(item, index) in headers" class="align-item-center">
                                            <td style="vertical-align:middle; width: 50px;"><input class="form-check-input" type="checkbox" :checked="item.state" :id="'ckb-' + item.id"></td>
                                            <td><input type="text" class="form-control form-control-sm width-50" v-model="item.key" :ref="'key-' + item.id"></td>
                                            <td><input type="text" class="form-control form-control-sm" v-model="item.value"></td>
                                            <td><input type="text" class="form-control form-control-sm" v-model="item.description"></td>
                                            <td style="width: 50px;"><i class="bi bi-trash" style="font-size:1.5rem; cursor: pointer;" @click="deleteItem('header',item.id)"></i></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!-- params -->
                    <div id="params" class="container-fluid tab-pane active" style="width: 100%; margin-left: 0; margin-right: 0;">
                        <div class="row">
                            <div class="col">
                                <table class="table table-hover table-sm">
                                    <thead>
                                        <tr class="align-items-center">
                                            <td style="width: 50px;">&nbsp;</td>
                                            <td>Key</td>
                                            <td>Value</td>
                                            <td>Description</td>
                                            <td style="width: 50px;"><i class="bi bi-plus-circle" style="font-size:1.5rem; cursor: pointer;" @click="addItem('param')"></i></td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(item, index) in params" class="align-items-center">
                                            <td style="vertical-align:middle; width: 50px;"><input class="form-check-input" type="checkbox" :checked="item.state" :id="'ckb-' + item.id"></td>
                                            <td><input type="text" class="form-control form-control-sm width-50" v-model="item.key" :ref="'key-' + item.id"></td>
                                            <td><input type="text" class="form-control form-control-sm" v-model="item.value"></td>
                                            <td><input type="text" class="form-control form-control-sm" v-model="item.description"></td>
                                            <td style="width: 50px;"><i class="bi bi-trash" style="font-size:1.5rem; cursor: pointer;" @click="deleteItem('param', item.id)"></i></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!-- body -->
                    <div id="body" class="container-fluid tab-pane fade" style="width: 100%; margin-left: 0; margin-right: 0;">
                        <div class="row">
                            <div class="col">
                                <textarea class="form-control form-control-sm" v-model="myBody" rows="13" style="resize: none;" style="width: 100%;"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col" style="height: 100%;">
                <div class="container-fluid border-top" style="height: 100%;">
                    <div class="row">
                        <div class="col">{{myResponse.title}}</div>
                    </div>
                    <div class="row">
                        <div class="col">{{myResponse.content}}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- </form> -->
    </div>
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../../../node_modules/vue/dist/vue.global.prod.js"></script>
    <script src="../../../node_modules/axios/dist/axios.min.js"></script>
    <script src="http.js"></script>
</body>
</html>